<template>
  <div style="margin-top: 20px">
    <el-form ref="form" :rules="rules" :model="form" label-width="80px" v-if="!isDetail">
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item
              label="平台类型"
              prop="sourcePlatformCode"
              style="margin-right: 15px"
              label-width="100px"
            >
              <el-select
                v-model="form.sourcePlatformCode"
                placeholder="请选择平台类型"
                style="width: 100%"
                @change="changePlatformType"
              >
                <el-option
                  v-for="item in platformTypeList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item
              label="承运商"
              prop="outerCode"
              style="margin-right: 15px"
              label-width="100px"
            >
              <el-select
                v-model="form.outerCode"
                placeholder="请选择承运商"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="item in carrierManagement"
                  :key="item.code"
                  :label="item.name + item.branchCode"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item
              label="店铺"
              prop="shopCode"
              style="margin-right: 15px"
              label-width="100px"
            >
              <el-select
                v-model="form.shopCode"
                placeholder="请选择店铺"
                style="width: 100%"
                @change="changeShop"
              >
                <el-option
                  v-for="item in shopList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <el-form-item
              label="备注"
              prop="remarks"
              style="margin-right: 15px"
              label-width="100px"
            >
              <el-input v-model="form.remarks" placeholder="请输入备注" />
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div v-if="!isDetail" slot="footer" class="mr15 dialog-footer">
      <el-button type="primary" :loading="isDisable" plain @click="submitData">确 定</el-button>
    </div>
  </div>
</template>
<script>
import { getDictList } from '@/api/basicInfo'
import { manifestBalanceAdd, manifestBalanceEdit, manifestBalanceDetail, getShopList } from '@/api/comprehensive/manifestBalance'

export default {
  name: 'ManifestBalanceAE',
  props: {
    operationType: {
      type: String,
      required: true
    },
    operationCode: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isDetail: this.operationType === 'detail', // 详情的时候隐藏确定按钮
      carrierManagement: [],
      isDisable: false,
      form: {
        outerCode: '',
        remarks: '' //备注
      },
      rules: {
        sourcePlatformCode: [{ required: true, message: '请选择平台类型' }],
        outerCode: [{ required: true, message: '请选择承运商' }],
        shopCode: [{ required: true, message: '请选择店铺' }]
      },
      shopList: [],
      platformTypeList: [], // 平台类型
    }
  },
  created() {
    getDictList('salePlatform').then(res=>{
      this.platformTypeList = res.data[0].dictList
    })
    getShopList().then((res) => this.shopList = res.data)
    // 编辑和查看详情调用 详情数据接口
    if (this.operationType !== 'add') this.getDetail()
  },
  methods: {
    changePlatformType(code, data) {
      this.form.outerCode = ''
      getDictList(code).then((res) => {
        this.carrierManagement = res.data[0].dictList
      }).finally(() => {
        data && (this.form = data)
      })
    },
    changeShop(code) {
      this.form.shopName = 'orange'
    },
    // 提交数据 - 新增 or 编辑
    submitData() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.isDisable = true
          const requestOperation = this.operationType === 'add' ? manifestBalanceAdd : manifestBalanceEdit
          requestOperation(this.form)
            .then((res) => {
              this.$message.success(res.msg)
              this.$emit('operationComplete', this.operationType)
              this.isDisable = false
            })
            .catch(() => (this.isDisable = false))
        } else {
          return false
        }
      })
    },
    // 获取详情数据
    getDetail() {
      manifestBalanceDetail(this.operationCode).then((res) => {
        this.changePlatformType(res.data.sourcePlatformCode, res.data)
      })
    }
  }
}
</script>
<style scoped>
.mr15 {
  margin-right: 15px;
}
.dialog-footer {
  margin: 15px 0 15px 0;
  float: right;
}
</style>
